<template>
    <div class="container">
        <div class="list" v-for="item of musics" :key="item.id">
             <img :src="item.blurCoverUrl" alt="">
            <div class="detail">
                <p>{{item.mainSong.name}}</p>
                <p>{{item.dj.nickname}}</p>
            </div>
            <div>
                <p class="category">{{item.radio.category}}</p>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name:"App",
    data(){
        return{
            musics:[]
        }
    },
    mounted(){
        var url="https://music.aityp.com/program/recommend?limit=30"
        axios.get(url).then(res=>{
            this.musics=res.data.programs;
        })
    }
}
</script>
<style scoped>
    
</style>